<template>
    <div class="box">
        <van-sticky>
            <van-tabs color="#66d6ff" :sticky="true" :active="active" title-active-color="#66d6ff" @click-tab="onClickTab">
                <van-tab title="团队数据" name="team"></van-tab>
                <van-tab title="自营数据" name="direct"></van-tab>
                <van-tab title="下级团队数据" name="below"></van-tab>
            </van-tabs>
        </van-sticky>
        <div class="swiperModel">
            <van-swipe :show-indicators="false" :loop="false" width="300">
                <van-swipe-item>
                    <div class="modelItem">
                        <allData :active="active" :date="date" @showPicker="showDataPicker" />
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="modelItem">
                        <activityNum :active="active" :date="date1" @showPicker="showDataPicker1" />
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="modelItem">
                        <earnings :active="active" :date="date2" @showPicker="showDataPicker2" />
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="modelItem">
                        <averageMonth :active="active" />
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-calendar
            :allow-same-day="true"
            :min-date="minDate"
            :max-date="maxDate"
            color="#55bbf9"
            v-model:show="showDay"
            :default-date="defaultDay"
            type="range"
            @confirm="onConfirm"
            :show-confirm="false"
        >
            <template #footer>
                <div class="footer">
                    <div class="item" @click="getDay('上周', 'date')">
                        <van-button type="primary">上周</van-button>
                    </div>
                    <div class="item" @click="getDay('本周', 'date')">
                        <van-button type="primary">本周</van-button>
                    </div>
                    <div class="item" @click="getDay('上月', 'date')">
                        <van-button type="primary">上月</van-button>
                    </div>
                    <div class="item" @click="getDay('本月', 'date')">
                        <van-button type="primary">本月</van-button>
                    </div>
                </div>
            </template>
        </van-calendar>
        <van-calendar
            :allow-same-day="true"
            :min-date="minDate"
            :max-date="maxDate"
            color="#55bbf9"
            v-model:show="showDay1"
            :default-date="defaultDay1"
            type="range"
            @confirm="onConfirm1"
            :show-confirm="false"
        >
            <template #footer>
                <div class="footer">
                    <div class="item" @click="getDay('上周', 'date1')">
                        <van-button type="primary">上周</van-button>
                    </div>
                    <div class="item" @click="getDay('本周', 'date1')">
                        <van-button type="primary">本周</van-button>
                    </div>
                    <div class="item" @click="getDay('上月', 'date1')">
                        <van-button type="primary">上月</van-button>
                    </div>
                    <div class="item" @click="getDay('本月', 'date1')">
                        <van-button type="primary">本月</van-button>
                    </div>
                </div>
            </template>
        </van-calendar>
        <van-calendar
            :allow-same-day="true"
            :min-date="minDate"
            :max-date="maxDate"
            color="#55bbf9"
            v-model:show="showDay2"
            :default-date="defaultDay2"
            type="range"
            @confirm="onConfirm2"
            :show-confirm="false"
        >
            <template #footer>
                <div class="footer">
                    <div class="item" @click="getDay('上周', 'date2')">
                        <van-button type="primary">上周</van-button>
                    </div>
                    <div class="item" @click="getDay('本周', 'date2')">
                        <van-button type="primary">本周</van-button>
                    </div>
                    <div class="item" @click="getDay('上月', 'date2')">
                        <van-button type="primary">上月</van-button>
                    </div>
                    <div class="item" @click="getDay('本月', 'date2')">
                        <van-button type="primary">本月</van-button>
                    </div>
                </div>
            </template>
        </van-calendar>
    </div>
</template>
<script>
export default {
    name: 'shareData' //命名组件
}
</script>
<script setup>
import allData from './component/allData.vue'
import activityNum from './component/activityNum.vue'
import earnings from './component/earnings.vue'
import averageMonth from './component/averageMonth.vue'
import { parseTime } from '@/utils/utils.ts'
const active = ref('team')
const showDay = ref(false)
const showDay1 = ref(false)
const showDay2 = ref(false)
const defaultDay = ref([])
const defaultDay1 = ref([])
const defaultDay2 = ref([])
// 日历设置选择范围
const minDate = ref(new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, new Date().getDate()))
const maxDate = ref(new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))
// 初始日期默认为当天\
const date = ref(`${parseTime(new Date(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`)
// const date = ref(
//     `${new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()}至${
//         new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
//     }`
// )
const date1 = ref(`${parseTime(new Date(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`)
const date2 = ref(`${parseTime(new Date(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`)
// 格式化日期格式
const formatDate = date =>
    `${date.getFullYear()}-${date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${
        date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
    }`
const onConfirm = values => {
    const [start, end] = values
    showDay.value = false
    date.value = `${formatDate(start)} 至 ${formatDate(end)}`
}
const onConfirm1 = values => {
    console.log(values)
    const [start, end] = values
    showDay1.value = false
    date1.value = `${formatDate(start)} 至 ${formatDate(end)}`
    console.log(date.value, 'date.value')
}
const getDay = (dayType, key) => {
    var today = new Date()
    if (dayType === '本周') {
        // 获取当前日期
        // 获取今天是星期几（0 表示星期日，1 表示星期一，以此类推）
        var dayOfWeek = today.getDay()
        // 计算星期一距离今天的天数
        var daysUntilMonday = 1 - dayOfWeek

        // 计算星期一的日期
        var monday = new Date(today)
        monday.setDate(today.getDate() + daysUntilMonday)
        console.log('本周星期一的日期是：' + parseTime(monday.toDateString(), '{y}-{m}-{d}'))
        if (key === 'date') {
            date.value = `${parseTime(monday.toDateString(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`
            defaultDay.value = [monday, new Date()]
        }
        if (key === 'date1') {
            date1.value = `${parseTime(monday.toDateString(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`
            defaultDay1.value = [monday, new Date()]
        }
        if (key === 'date2') {
            date2.value = `${parseTime(monday.toDateString(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`
            defaultDay2.value = [monday, new Date()]
        }
    }
    if (dayType === '本月') {
        // 获取当前月份的第一天
        var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
        // 输出本月第一天的日期
        console.log('本月的第一天是：' + parseTime(firstDayOfMonth.toDateString(), '{y}-{m}-{d}'))
        if (key === 'date') {
            date.value = `${parseTime(firstDayOfMonth.toDateString(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`
            defaultDay.value = [firstDayOfMonth, new Date()]
        }
        if (key === 'date1') {
            date1.value = `${parseTime(firstDayOfMonth.toDateString(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`
            defaultDay1.value = [firstDayOfMonth, new Date()]
        }
        if (key === 'date2') {
            date2.value = `${parseTime(firstDayOfMonth.toDateString(), '{y}-{m}-{d}')}至${parseTime(new Date(), '{y}-{m}-{d}')}`
            defaultDay2.value = [firstDayOfMonth, new Date()]
        }
    }
    if (dayType === '上周') {
        // 获取今天是星期几（0 表示星期日，1 表示星期一，以此类推）
        var dayOfWeek = today.getDay()
        // 计算上周星期一距离今天的天数
        var daysUntilLastMonday = dayOfWeek + 6 // 加 6 天是因为今天也算一天
        // 计算上周星期一的日期
        var lastMonday = new Date(today)
        lastMonday.setDate(today.getDate() - daysUntilLastMonday)

        // 获取今天是星期几（0 表示星期日，1 表示星期一，以此类推）
        var dayOfWeek1 = today.getDay()

        // 计算上周星期日距离今天的天数
        var daysUntilLastSunday = dayOfWeek1

        // 计算上周星期日的日期
        var lastSunday = new Date(today)
        lastSunday.setDate(today.getDate() - daysUntilLastSunday)

        // 调整日期到上周
        lastSunday.setDate(lastSunday.getDate())

        // 输出上周星期一的日期
        console.log('上周星期一的日期是：' + parseTime(lastMonday.toDateString()))
        // 输出上周星期日的日期
        console.log('上周星期日的日期是：' + parseTime(lastSunday.toDateString()))

        if (key === 'date') {
            date.value = `${parseTime(lastMonday.toDateString(), '{y}-{m}-{d}')}至${parseTime(lastSunday.toDateString(), '{y}-{m}-{d}')}`
            defaultDay.value = [lastMonday, lastSunday]
        }
        if (key === 'date1') {
            date1.value = `${parseTime(lastMonday.toDateString(), '{y}-{m}-{d}')}至${parseTime(lastSunday.toDateString(), '{y}-{m}-{d}')}`
            defaultDay1.value = [lastMonday, lastSunday]
        }
        if (key === 'date2') {
            date2.value = `${parseTime(lastMonday.toDateString(), '{y}-{m}-{d}')}至${parseTime(lastSunday.toDateString(), '{y}-{m}-{d}')}`
            defaultDay2.value = [lastMonday, lastSunday]
        }
    }
    if (dayType === '上月') {
        // 获取上个月的年份和月份
        var lastMonthYear = today.getFullYear()
        var lastMonth = today.getMonth() - 1

        // 如果当前月份是一月，需要减少年份，并设置月份为十二月
        if (lastMonth < 0) {
            lastMonthYear -= 1
            lastMonth = 11 // JavaScript 月份是从0开始，十二月是11
        }

        // 获取上个月的第一天（1号）
        var firstDayOfLastMonth = new Date(lastMonthYear, lastMonth, 1)

        // 获取本月的第一天（1号）
        var firstDayOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1)

        // 获取上个月的最后一天（这个月的0号，即上个月的最后一天）
        var lastDayOfLastMonth = new Date(firstDayOfThisMonth)
        lastDayOfLastMonth.setDate(0)
        console.log('上个月的1号是：' + parseTime(firstDayOfLastMonth.toDateString()))
        console.log('上个月的最后一天是：' + parseTime(lastDayOfLastMonth.toDateString()))
        if (key === 'date') {
            date.value = `${parseTime(firstDayOfLastMonth.toDateString(), '{y}-{m}-{d}')}至${parseTime(
                lastDayOfLastMonth.toDateString(),
                '{y}-{m}-{d}'
            )}`
            defaultDay.value = [firstDayOfLastMonth, lastDayOfLastMonth]
        }

        if (key === 'date1') {
            date1.value = `${parseTime(firstDayOfLastMonth.toDateString(), '{y}-{m}-{d}')}至${parseTime(
                lastDayOfLastMonth.toDateString(),
                '{y}-{m}-{d}'
            )}`
            defaultDay1.value = [firstDayOfLastMonth, lastDayOfLastMonth]
        }

        if (key === 'date2') {
            date2.value = `${parseTime(firstDayOfLastMonth.toDateString(), '{y}-{m}-{d}')}至${parseTime(
                lastDayOfLastMonth.toDateString(),
                '{y}-{m}-{d}'
            )}`
            defaultDay2.value = [firstDayOfLastMonth, lastDayOfLastMonth]
        }
    }
    showDay.value = false
    showDay1.value = false
    showDay2.value = false
}
const onConfirm2 = values => {
    console.log('onConfirm2', '11111')
    const [start, end] = values
    showDay2.value = false
    date2.value = `${formatDate(start)} 至 ${formatDate(end)}`
    console.log(date2.value, 'date2.value')
}
const showDataPicker = () => {
    showDay.value = true
}
const showDataPicker1 = () => {
    showDay1.value = true
}
const showDataPicker2 = () => {
    showDay2.value = true
}
const onClickTab = ({ name }) => {
    active.value = name
}
</script>
<style lang="scss" scoped>
.swiperModel {
    height: 100vh;
    background: #f3f3f3;
    margin-top: 20px;
    padding: 10px;
    .modelItem {
        background: #fff;
        // box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
        z-index: 999;
        opacity: 1;
        border-radius: 6px;
        padding: 10px;
        margin-right: 15px;
    }
    .van-swipe-item {
        // margin-right: 15px;
        background-color: #e9e7e7;
        box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
    }
}
.footer {
    display: flex;
    align-items: center;
    .item {
        width: 50%;
        text-align: center;
        padding: 10px 0;
        color: #ffffff;
    }
    .van-button--primary {
        background: #eef8fe;
        color: #888;
        border: 0px;
    }
}
</style>
